<template>

    <div>
        <!-- Question组件 -->
        <h4 style="margin-bottom:15px;">1# {{handelOptions.title}} <i @click="showTips" class="el-icon-question"></i> </h4>

        <el-checkbox-group v-model="checkList">
            <template v-for="(item, index) in handelOptions.options">
                <el-checkbox :key="index" :label="item.index">
                    {{getLetterByIndex(index)}})
                    {{item.value}}
                </el-checkbox>
            </template>
        </el-checkbox-group>
        <el-button-group>
            <el-button :disabled="index==0" @click="prev" size="small" type="success" icon="el-icon-arrow-left">上一题</el-button>
            <el-button :disabled="index==randomSize-1" @click="next" size="small" type="success">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

        <!-- {{tableData}} --><!-- 全部数据 -->
        <div style="width:500px;">{{handelOptions}}</div> <!-- 所有数据的第一条 -->
        {{index}} <!-- 索引页数 -->

        <!-- 抽屉 -->
        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :direction="direction"
            :modal="false"
            :width-header="false">
            <div style="padding:20px;">
                {{tableData[index].tips}}
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      drawer: false,
      direction: "rtl",
    //   index: 0
    };
  },
  methods: {
    ...mapActions("study", ["getQuestionList"]),
    ...mapMutations("study",["SET_INDEX"]),
    getLetterByIndex(index) { //根据索引渲染对应 A B C D
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
    prev(){
        this.SET_INDEX(this.index-1)
    },
    next(){
        this.SET_INDEX(this.index+1)
    },
    showTips() {
      console.log(111);
      this.drawer = true;
    }
  },
  computed: {
    ...mapState("study", ["tableData", "index", "randomSize"]),
    ...mapGetters("study", ["handelOptions"]),
  },
  mounted() {
    console.log(this.getQuestionList());
    // if(!this.$store.state.questions.list){
    //     this.$store.dispatch("questions/getList")
    // }
  }
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  display: block;
  margin-bottom: 15px;
}
.el-icon-question {
  cursor: pointer;
  margin-left: 10px;
}
</style>